*{
    padding: 0;
    margin: 0;
}
ul li{
    list-style: none;
}
ul{
    width: 100px;
    height: 100px;
    margin:100px auto;
    position: relative;
    transform-style: preserve-3d;
    transform-origin: 50% 50%;
    perspective: 20000px;
}
.wn1,.wn2,.wn3,.wn4{
    width: 0;
    height: 0;
    position: absolute;

}
.wn5{
    width: 100px;
    height: 100px;
    position: absolute;
}
.wn1{
    border-bottom: 100px solid red;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    transform:translateZ(-50px);
}
.wn2{
    border-bottom: 100px solid #a900ff;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    transform: translateZ(50px);
}
.wn3{
    border-bottom: 100px solid #ff9138;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    transform: rotateY(270deg) translateZ(50px);
}
.wn4{
    border-bottom: 100px solid #76eeff;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    transform: rotateY(90deg) translateZ(50px);
}
.wn5{
    background: darkslategray;
    transform: rotateX(270deg) translateZ(50px);
}

ul {
    animation: pp 50s linear infinite;
}

@keyframes pp {
    from{
        transform: rotateX(0deg) rotateY(0deg);
    }
    to{
        transform: rotateX(360deg) rotateY(360deg);
    }
}
li:hover{
    animation-play-state: paused;
}